<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的供应商</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <!--数据表格-->
    <template>
        <div>
            <span>地址:</span>
            <el-select v-model="prov" style="width:167px;margin-right: 25px;" @change="updateCity">
                <el-option v-for="option in arr" :value="option.name">
                    <span>{{ option.name }}</span>
                </el-option>
            </el-select>
            <el-select v-model="city" style="width:167px;margin-right: 25px;" @change="updateDistrict">
                <el-option v-for="option in cityArr" :value="option.name">
                    <span>{{ option.name }}</span>
                </el-option>
            </el-select>
            <el-select v-model="district" v-if="district" style="width:167px;">
                <el-option v-for="option in districtArr" :value="option.name">
                    {{ option.name }}
                </el-option>
            </el-select>
            <span>公司名称:</span>
            <el-input v-model="input" placeholder="请输入内容" style="width: 100px"></el-input>
            <template>
                <el-button type="primary" icon="el-icon-search" @click="loginSeek(1)">搜索</el-button>
            </template>
        </div>
    </template>
    <el-table
            ref="roleTable"
            :data="companys"
            @select-all="selectAll"
            @current-change="changeCurrent"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column label="编号">
            <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="公司名称">
            <template slot-scope="scope">
                <span style="color: #3a8ee6" @click="detailsCompany(scope.row.id)">{{ scope.row.companyName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="区域">
            <template slot-scope="scope">
                <span>{{ scope.row.companyAddress }}</span>
            </template>
        </el-table-column>
        <el-table-column label="主要经营">
            <template slot-scope="scope">
                <span>{{ scope.row.businessScope }}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系人">
            <template slot-scope="scope">
                <span>{{ scope.row.legal }}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系电话">
            <template slot-scope="scope">
                <span>{{ scope.row.legalTel }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注">
            <template slot-scope="scope">
                <span>{{ scope.row.rremark }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <el-button
                        size="mini"
                        @click="handleOrder(scope.$index, scope.row)">订购
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loginPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="供应商修改" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="company">
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="company.rremark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveFunction">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script src="/js/details/city.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                company: {
                    id: '',
                    rRemark: '',
                },
                companys: null,
                total: 0,//总条数
                current: 1,//当前条数
                pageSize: 5, //每页条数
                current1: null, //当前点击的角色
                dialogFormVisible: false,//控制对话框的显示
                formLabelWidth: '120px', //表单标签的宽度
                arr: cityAll,
                prov: '省份',
                city: '城市',
                district: '区域',
                cityArr: [],
                districtArr: [],
                input: ''

            }
        },
        mounted() {
            this.loginPage(1);
        },
        methods: {
            loginCompany(current) {
                this.current = current;
                //加载公司
                axios.get("/companys?current=" + current).then(value => {
                    this.companys = value.data.records;
                    this.total = value.data.total;
                    this.pageSize = value.data.size;
                    this.current = value.data.current;
                    console.log(value.data)
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.company = row;
                this.dialogFormVisible = true;
                this.loginPage(this.current)
            },
            handleOrder(index, row) {
                location.href="/purchase_manage/purchase.html"
                console.log(index, row);
            },
            saveFunction() {
                axios.put("/companyUpdate",this.company).then(value => {
                    this.loginPage(this.current)
                });
                this.dialogFormVisible = false;
            },
            //关闭对话框
            closeMyDialog() {
                //清空数据
                this.role = {
                    id: '',
                    roleName: '',
                    roleDescribe: '',
                    roleCreateName: '',
                    roleStatus: '',
                    companyId: '',
                    roleUpdateName: ''
                }
            },
            changeCurrent(row) {

                this.current1 = row;
                //取消所有的选择效果
                this.$refs.roleTable.clearSelection();
                //选中当前的行
                this.$refs.roleTable.toggleRowSelection(row);
            },
            //取消全选角色
            selectAll() {
                this.$refs.roleTable.clearSelection();
            },
            detailsCompany(id) {
                axios.get("/deta/" + id).then(value => {
                    location.href = "/company/company-details.html"
                });
            },
            updateCity() {
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.name == this.prov) {
                        console.log(this.prov)
                        this.cityArr = obj.sub;
                        break;
                    }
                }
                this.city = this.cityArr[0].name;
            },
            updateDistrict() {
                for (var i in this.cityArr) {
                    var obj = this.cityArr[i];
                    console.log(this.city)
                    if (obj.name == this.city) {
                        this.districtArr = obj.sub;
                        break;
                    }
                }
                if (this.districtArr && this.districtArr.length > 0 && this.districtArr[0].name) {
                    this.district = this.districtArr[0].name;
                } else {
                    this.district = '';
                }
            },
            loginSeek(current) {
                axios.get("/companyselect?current="+current+"&prov="+this.prov+"&city="+this.city+"&district="+this.district+"&input="+this.input).then(value => {
                    this.companys = value.data.records;
                    this.total = value.data.total;
                    this.pageSize = value.data.size;
                    this.current = value.data.current;
                    console.log(value.data)
                });
                console.log(this.prov)
                console.log(this.city)
                console.log(this.district)
                console.log(this.input)
            },

            loginPage(current){
                if ((this.prov!='省份' && this.city!='城市' && this.district!='区域')||this.input!='' ){
                    this.loginSeek(current)
                }else {
                    this.loginCompany(current)
                }
            }

        }
    })
</script>
</body>
</html>